<template>
<div class="container">
  <headers :title="title" :refresh="isRefresh" :path="path"></headers>
  <div class="content" id="app-message">
    <div class="list-block no-margin">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-item-notice"></i></div>
          <div class="item-inner no-padding-left">
            <div class="item-title label col-100">公告区，我是分割线---</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block media-list no-margin mar-top-10" v-for="message in messages">
      <ul>
        <li>
          <a href="#" class="item-link item-content">
            <div class="item-inner no-padding-left">
              <div class="item-title-row">
                <div class="item-title color-light">
                  {{message.id}}
                </div>
                <div class="item-after">{{message.createDate | formatDate}}</div>
              </div>
              <div class="item-title-row">
                <div class="item-title color-black">
                  {{message.sender}}
                </div>
                <div class="item-after"></div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#" class="item-link item-content">
            <div class="item-inner no-padding-left">
              <div class="item-title-row">
                <div class="item-title color-light">
                  {{message.empName}}
                </div>
                <div class="item-after"></div>
              </div>
              <div class="item-title-row">
                <div class="item-title color-black">
                  {{message.render}}
                </div>
                <div class="item-after"></div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader">
      <div class="preloader" v-show="isLoading"></div>
      <div class="preloader-btn" v-if="!isLoading && !isLoaded" @click="doPreload">点击加载更多</div>
      <div class="preloaded" v-if="isLoaded">没有更多内容了</div>
    </div>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/liuyanjuti', replace: true}">
      <span class="icon icon2 message-icon"></span>
      <span class="tab-label">留言</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getMessages(this.currPage, () => {
      setTimeout(() => {
        if (this.currPage === this.totalPage) {
          this.isLoaded = true
        }
        this.isLoading = false
      }, 500)
    })
  },
  data () {
    return {
      messages: [],
      title: '留言',
      path: '/home',
      isRefresh: true,
      isLoading: true,
      isLoaded: false,
      totalPage: 1,
      currPage: 1
    }
  },
  methods: {
    getMessages (page, callback) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppMessages', {
        params: {
          customerId: store('customerId') || 0,
          page: page
        }
      }).then((data) => {
        let total = data.data.total ? Math.ceil(data.data.total / 5) : 1
        this.$set('totalPage', total)
        if (this.messages.length === 0) {
          this.$set('messages', data.data.rows)
        }
        else {
          this.messages = this.messages.concat(data.data.rows)
        }
        if (callback) {
          callback()
        }
      })
    },
    doPreload () {
      if (this.isLoading) {
        return false
      }
      if (this.currPage === this.totalPage) {
        return false
      }
      this.isLoading = true
      this.currPage++
      this.getMessages(this.currPage, () => {
        setTimeout(() => {
          if (this.currPage === this.totalPage) {
            this.isLoaded = true
          }
          this.isLoading = false
        }, 500)
      })
      return false
    }
  },
  filters: {
    formatDate (timestamp) {
      let date = new Date(timestamp)
      return date.toLocaleDateString().replace(/\//g, '-') + ' ' + date.toTimeString().substr(0, 5)
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.item-content{
  padding-left:15px!important;
}
.icon.icon-item-notice {
  width: 25px;
  height: 25px;
  background-image: url("../assets/images/public/icon-item-notice.png");
}
.list-block .item-title.label.col-100{width:100%;}
.list-block:last-child{margin-bottom:58px;}
.infinite-scroll-preloader{
  margin:10px 10px 65px 10px;
  text-align:center;
}
.infinite-scroll-preloader .preloader{
  width:20px;
  height:20px;
}
.infinite-scroll-preloader .preloader-btn{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  border:1px #d6d6d6 solid;
  border-radius:4px;
  font-size:14px;
}
.infinite-scroll-preloader .preloaded{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  color:#aaa;
  font-size:14px;
}
</style>